<template>
	<view class="content">
		<view class="title">微贝臻选分享二维码</view>
		
		<view class="codeBox">
			<view class="container">
				<view class="qrimg">
					<view class="qrimg-i">
						<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
					</view>
					<!-- <view class="qrimg-i">
						<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
					</view> -->
				</view>
				<!-- <view class="uni-padding-wrap">
					<view class="uni-title">请输入要生成的二维码内容</view>
				</view>
				<view class="uni-list">
					<input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
				</view>
				<view class="uni-padding-wrap uni-common-mt">
					<view class="uni-title">设置二维码大小</view>
				</view> -->
				<!-- <view class="body-view">
					<slider :value="size" @change="sliderchange" min="50" max="500" show-value />
				</view> -->
				<view class="uni-padding-wrap">
					<view class="btns">
						<!-- <button type="primary" @tap="selectIcon">选择二维码图标</button>
						<button type="primary" @tap="creatQrcode">生成二维码</button> -->
						<!-- <button type="primary" @tap="saveQrcode">保存到图库</button> -->
						<!-- <button type="warn" @tap="clearQrcode">清除二维码</button>
						<button type="warn" @tap="ifQrcode">显示隐藏二维码</button> -->
					</view>
				</view>
			</view>
		</view>
		
			<button type="primary" class="saveBtn" @tap="saveQrcode" @longpress="code()">保存到图库</button>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			
			return {
				userinfo:'',
				modal_qr: false,
				url:'' ,
				ifShow: true,
				val: '', // 要生成的二维码值
				size: 300, // 二维码大小
				unit: 'upx', // 单位
				background: 'black', // 背景色
				foreground: 'white', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '../../static/64.jpg', // 二维码图标
				iconsize: 50, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onReady() {
		            let that = this;
		           this.creatQrcode()
		        },
		onShow() {
			const res=  uni.getStorage({
			    key: 'userInfo',
			    success: (res)=> {
					
					if(res.data){
						//console.log(res.data,'ssssss')
			     this.userinfo=res.data
				 if(this.userinfo.member_id){
				 //this.getuseragain();
				 this. val="http://pth5.njkw668.com/#/pages/user/user?&pid="+this.userinfo.member_id+"&&"
				 }
				 }
				 else{
					 window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
				 }
			    },
				fail: (res)=> {
				window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
				}
			});
		},
		methods: {
			code() {
				uni.downloadFile({
					url:this.url,
					success: (res) => { 
						console.log(res.tempFilePath)
						// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！"
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			
			async getuseragain(){
				
				const res=await this.$myRequest({
						url:'index.php/api/user/getuserinfo',
						method:"POST",
						data:{
							"member_id":this.userinfo.member_id,
							
						},
						
					
				})	
				if(res.status==200){
				this.userinfo=res.data
				}
			},
			sliderchange(e) {
				this.size = e.detail.value
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.src = res
			},
			clearQrcode() {
				this.$refs.qrcode._clearCode()
				this.val = ''
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
			selectIcon() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						that.icon = res.tempFilePaths[0]
						setTimeout(() => {
							that.creatQrcode()
						}, 100);
						// console.log(res.tempFilePaths);
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.qrimg {
		display: flex;
		justify-content: center;
	}
	.qrimg-i{
		margin-right: 10px;
	}
	
	slider {
		width: 100%;
	}
	
	input {
		width: 100%;
		margin-bottom: 20upx;
	}
	
	.btns {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	button {
		width: 100%;
		margin-top: 10upx;
	}
	page{
		background: #156CCE;
	}
	.content{
		width: 100%;
		height: calc(100vh - 44px);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.title{
		color: #E8F764;
		font-size: 36rpx;
		font-weight: bold;
	}
	.codeBox{
		width: 70%;
		height: 700upx;
		padding: 110upx 10upx;
		background: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		align-items: center;
		
		
		
	}
	.codeBox ayQrcode{
		width: 50%;
	}
	.codeBox view{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #666;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
	
		

		
	}
	.Skeleton{
		margin-top: 250upx;
		background: #ffffff;
		margin-left: -60upx;
	}
	.saveBtn{
		width: 80%;
		margin: 0 10%;
		border-radius: 92rpx;
		background:  #E8F764;
		color: #666;
		font-weight: bold;
		border: none;
	}
</style>
